{% extends 'base.html' %}
{% load static %}

{% block title %}{{ page.title }} - {{ site_settings.site_name|default:"خبرگزاری ایثار" }}{% endblock %}

{% block content %}
<div class="article-detail">
    <h1><i class="fas fa-file-alt"></i> {{ page.title }}</h1>
    <div class="body-text">
        {{ page.content|linebreaks }}
    </div>
</div>

<!-- ===== فرم تماس با ما (فقط برای صفحه‌ای با اسلاگ contact یا همیشه نمایش داده می‌شود) ===== -->
{% if page.slug == 'contact' %}
<div style="margin-top: 40px; background: #fff; padding: 30px; border-radius: 16px; box-shadow: 0 3px 25px rgba(0, 0, 0, 0.05); border-right: 4px solid var(--secondary-color);">
    <h3 style="color: var(--accent-color); font-size: 20px; font-weight: 700; margin-bottom: 20px;">
        <i class="fas fa-envelope" style="color: var(--secondary-color);"></i> ارسال پیام به ما
    </h3>

    <!-- نمایش پیام‌های موفقیت یا خطا -->
    {% if messages %}
        {% for message in messages %}
            <div style="padding: 15px; border-radius: 8px; margin-bottom: 20px; background: {% if message.tags == 'success' %}#d4edda; color:#155724;{% else %}#f8d7da; color:#721c24;{% endif %} border: 1px solid {% if message.tags == 'success' %}#c3e6cb{% else %}#f5c6cb{% endif %};">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <form method="POST" action="" style="display: flex; flex-direction: column; gap: 15px;">
        {% csrf_token %}
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
            <div>
                <label for="id_name" style="display: block; font-weight: 700; margin-bottom: 5px; font-size: 14px; color: #2d2d2d;">نام و نام خانوادگی <span style="color: #d32f2f;">*</span></label>
                <input type="text" name="name" id="id_name" placeholder="نام خود را وارد کنید..." required style="width: 100%; padding: 10px 15px; border: 2px solid #e0dcd5; border-radius: 8px; font-family: inherit; font-size: 14px; outline: none; transition: 0.3s;">
            </div>
            <div>
                <label for="id_email" style="display: block; font-weight: 700; margin-bottom: 5px; font-size: 14px; color: #2d2d2d;">ایمیل <span style="color: #d32f2f;">*</span></label>
                <input type="email" name="email" id="id_email" placeholder="example@mail.com" required style="width: 100%; padding: 10px 15px; border: 2px solid #e0dcd5; border-radius: 8px; font-family: inherit; font-size: 14px; outline: none; transition: 0.3s;">
            </div>
        </div>
        <div>
            <label for="id_subject" style="display: block; font-weight: 700; margin-bottom: 5px; font-size: 14px; color: #2d2d2d;">موضوع</label>
            <input type="text" name="subject" id="id_subject" placeholder="موضوع پیام خود را وارد کنید..." style="width: 100%; padding: 10px 15px; border: 2px solid #e0dcd5; border-radius: 8px; font-family: inherit; font-size: 14px; outline: none; transition: 0.3s;">
        </div>
        <div>
            <label for="id_message" style="display: block; font-weight: 700; margin-bottom: 5px; font-size: 14px; color: #2d2d2d;">متن پیام <span style="color: #d32f2f;">*</span></label>
            <textarea name="message" id="id_message" rows="6" placeholder="پیام خود را بنویسید..." required style="width: 100%; padding: 10px 15px; border: 2px solid #e0dcd5; border-radius: 8px; font-family: inherit; font-size: 14px; outline: none; transition: 0.3s; resize: vertical;"></textarea>
        </div>
        <div style="text-align: left;">
            <button type="submit" style="background: var(--secondary-color); color: var(--accent-color); border: none; padding: 12px 35px; border-radius: 30px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease;">
                <i class="fas fa-paper-plane"></i> ارسال پیام
            </button>
        </div>
    </form>
</div>
{% endif %}
{% endblock %}